class PostFrom extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            username: '',
            password: '',
            cellphone:'',
            email:'',
        };
        // this.onChange = this.onChange.bind(this)
    }
    onChange(e) {//把当前修改的值赋入state
        this.setState({
            [e.target.name]:e.target.value
        })
    }

    onSubmit(e) {
        if (!(/^[a-zA-Z0-9_-]{4,16}$/.test(this.state.username))){
            alert("用户名4到16位（字母，数字，下划线，减号）")
            e.preventDefault();
        }else if (!(/^[a-zA-Z0-9]{6,20}$/.test(this.state.password))){
            alert("用户密码最少6位，最多20位字母或数字的组合")
            e.preventDefault();
        }else if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.state.cellphone))){
            alert("请输入正确的手机号")
            e.preventDefault();
        }else if (!(/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/.test(this.state.email))){
            alert("请输入正确的邮箱")
            e.preventDefault();
        }else {
            // 阻止事件传递
            e.preventDefault();
            // 把表单用的最终数据从state中提取出来,传入请求
            const data ={
                userName:this.state.username,
                password:this.state.password,
                cellphone:this.state.cellphone,
                email:this.state.email
            }
            fetch('/bagevent-web/register',{
                // post提交
                method:"POST",
                headers:{
                    "Content-type":"application/json"
                },
                body:JSON.stringify(data),//把提交的内容转字符串
            }).then(function (res){
                if (res.status == "200"){
                    res.text().then(function (data) {
                        if (data == "success"){
                            alert("注册成功")
                            window.location.href="login.html"
                        }else if(data == "exist"){
                            alert("手机号或者邮箱已存在")
                        }else {
                            alert("注册失败")
                        }
                    })

                }else {
                    alert("出错啦")
                }
            })
        }

    }
    render() {
        return (
            <div>
                <form onSubmit={this.onSubmit.bind(this)}>
                    <div>
                        <label >用户名：</label>
                        <br />
                        <input type="text" name="username" placeholder="用户名" onChange={this.onChange.bind(this)} defaultValue={this.state.username} />
                    </div>
                    <div>
                        <label >密码：</label>
                        <br />
                        <input type="password" name="password" placeholder="密码" onChange={this.onChange.bind(this)} defaultValue={this.state.password} />
                    </div>
                    <div>
                        <label>手机号：</label>
                        <br />
                        <input type="text" name="cellphone" placeholder="手机号" onChange={this.onChange.bind(this)} defaultValue={this.state.cellphone} />
                    </div>
                    <div>
                        <label>邮箱：</label>
                        <br />
                        <input type="text" name="email" placeholder="邮箱" onChange={this.onChange.bind(this)} defaultValue={this.state.email} />
                    </div>
                    <br />
                    <button type="submit">注册</button>
                </form>
            </div>
        )
    }
}
ReactDOM.render(
    <PostFrom />,
    document.getElementById('root')
);